<template>
	<view>
		<uni-segmented-control :current="state" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#00aaff"></uni-segmented-control>
		<view v-for="o in orderList">
			<uni-card v-if="o.state == 1" :title="'订单号：'+o.id" extra="待付款">
				<view v-for="od in o.productList">
					<uni-row>
						<uni-col :span="8">
							<image :src="od.productImg" style="width: 200rpx;height: 200rpx;"></image>
						</uni-col>
						<uni-col :span="10" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; font-weight: bold;">{{od.productName}}</font>
						</uni-col>
						<uni-col :span="6" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; float: right;">￥{{od.productPrice}}</font>
							<br>
							<font style="float: right;">×{{od.buyNum}}</font>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="24">
							<view>应付款：￥{{od.buyNum*od.productPrice}}</view>
							<view style="float: right;">
								<button type="default" @click="canselOrder(o.id)"
									style="width: 160rpx;border-radius: 20px;float: right" size="mini">取消订单</button>
								<button type="warn" @click="payOrder(o.id)" style="width: 160rpx;border-radius: 20px;"
									size="mini">去付款</button>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>


			<uni-card v-else-if="o.state == 2" :title="'订单号：'+o.id" extra="待发货">
				<view v-for="od in o.productList">
					<uni-row>
						<uni-col :span="8">
							<image :src="od.productImg" style="width: 200rpx;height: 200rpx;"></image>
						</uni-col>
						<uni-col :span="10" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; font-weight: bold;">{{od.productName}}</font>
						</uni-col>
						<uni-col :span="6" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; float: right;">￥{{od.productPrice}}</font>
							<br>
							<font style="float: right;">×{{od.buyNum}}</font>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="24">
							<view>实付款：￥{{o.actualAmount}}</view>
							<view style="float: right;">
								<button type="default" @click="cui(o.id)" <!--
									style="width: 160rpx;border-radius: 20px;float: right" size="mini">催发货</button> -->
								<button type="warn" @click="lookOrderDetail(o.id)"
									style="width: 160rpx;border-radius: 20px;" size="mini">查看订单</button>
									<!-- 可以得到该卡片的订单详情id -->
								<!-- <button type="primary" @click="ast(od)"
									style="width: 160rpx;border-radius: 20px;" size="mini">6666
								</button> -->
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view>
				<button type="primary" @click="shouhouForDaifahuo(o)"
					style="width: 160rpx;border-radius: 20px;" size="mini">申请售后
				</button>
				</view>
			</uni-card>


			<uni-card v-else-if="o.state == 3" :title="'订单号：'+o.id" extra="已发货">
				<view v-for="od in o.productList">
					<uni-row>
						<uni-col :span="8">
							<image :src="od.productImg" style="width: 200rpx;height: 200rpx;"></image>
						</uni-col>
						<uni-col :span="10" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; font-weight: bold;">{{od.productName}}</font>
						</uni-col>
						<uni-col :span="6" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; float: right;">￥{{od.productPrice}}</font>
							<br>
							<font style="float: right;">×{{od.buyNum}}</font>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="24">
							<view>实付款：￥{{o.actualAmount}}</view>
							<view style="float: right;">
								<button type="default" @click="confirm(od.id)"
									style="width: 160rpx;border-radius: 20px;float: right" size="mini">查看物流</button>

							</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>


			<uni-card v-else-if="o.state == 4" :title="'订单号：'+o.id" extra="已完成">
				<view v-for="od in o.productList">
					<uni-row>
						<uni-col :span="8">
							<image :src="od.productImg" style="width: 200rpx;height: 200rpx;"></image>
						</uni-col>
						<uni-col :span="10" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; font-weight: bold;">{{od.productName}}</font>
						</uni-col>
						<uni-col :span="6" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; float: right;">￥{{od.productPrice}}</font>
							<br>
							<font style="float: right;">×{{od.buyNum}}</font>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="24">
							<view>实付款：￥{{o.actualAmount}}</view>
							<view style="float: right;">
								<button type="default" @click="confirm(o.id)"
									style="width: 160rpx;border-radius: 20px;float: right" size="mini"
									disabled="true">查看物流</button>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view>
					
					<button type="warn" @click="shouhouForYiwancheng(o)"
						style="width: 160rpx;border-radius: 20px;" size="mini">申请售后</button>
				</view>
			</uni-card>
			<uni-card v-else="o.state == 5" :title="'订单号：'+o.id" extra="已取消">
				<view v-for="od in o.productList">
					<uni-row>
						<uni-col :span="8">
							<image :src="od.productImg" style="width: 200rpx;height: 200rpx;"></image>
						</uni-col>
						<uni-col :span="10" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; font-weight: bold;">{{od.productName}}</font>
						</uni-col>
						<uni-col :span="6" style="margin-top: 30rpx;">
							<font style="font-size: 30rpx; float: right;">￥{{od.productPrice}}</font>
							<br>
							<font style="float: right;">×{{od.buyNum}}</font>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="24">
							<view>实付款：￥{{o.actualAmount}}</view>
							<view style="float: right;">

							</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				state: 0,
				orderList: [],
				items: ['全部', '待付款', '待发货', '已发货', '已完成'],
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: ''

			}
		},
		methods: {
			canselOrder(id) {
				uni.showModal({
					title: '提示',
					content: '是否取消',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: 'api/order-server/canselOrder',
								data: {
									"orderId": id
								},
								header: {
									"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
								},
								success: (res) => {
									if (res.data.code == 200) {
										uni.showToast({
											title: '取消成功',
											icon: 'success',
											duration: 2000
										});
									}
								},

							});

						} else if (res.cancel) {

						}
					}
				});
			},
			payOrder(id) {
				uni.navigateTo({
					url: '/pages/payOrder/payOrder?id=' + id
				})
			},
			lookOrderDetail(id) {

			},
			ast(od){
				console.log(od);
			},
			shouhouForDaifahuo(o) {
				//o为订单	
				uni.showModal({
					title: '提示',
					content: '是否确认提交售后',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: 'api/order-server/shouhou/addShouhou',
								method: "POST",
								data: {
									id: o.id
								},
								header: {
									"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
								},
								success: (res) => {
									console.log(res.data);
									if (res.data.code == 200) {
										uni.showToast({
											title: '售后成功',
											icon: 'success',
											duration: 2000
										});
										uni.navigateTo({
											url:'/pages/Shouhou/Shouhou'
										});
										uni.navigateTo({
											url:'/pages/Shouhou/Shouhou'
										})
									}
								},

							});

						} else if (res.cancel) {

						}
					}
				});
			},
			shouhouForYiwancheng(o) {
				//o为订单
				uni.navigateTo({
					url: '/pages/addShouhouForYiqianshou/addShouhouForYiqianshou?orderId=' + o.id
				})
			},

			confirm(orderDetailId) {
				uni.navigateTo({
					url:'/pages/orderDetail/logistics?orderDetailId='+orderDetailId
				})
			},
			onClickItem(e) {
				if (this.state !== e.currentIndex) {

					this.state = e.currentIndex
				}
				this.queryOrderByExample(this.state)
			},
			queryOrderByExample(state) {
				//查询待付款订单
				//查询待发货订单
				//查询待收货订单
				uni.request({
					url: 'api/order-server/queryOrderByExample',
					header: {
						"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
					},
					data: {
						"state": state,
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.orderList = res.data.data;
						}
					}
				})
			}
		},
		onLoad(e) {

			this.state = e.state;
			this.queryOrderByExample(e.state)
		}
	}
</script>

<style>

</style>